<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品页</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<body>
<h1>展示商品</h1>
<div class="productShow" id="productShowDiv">
    <table>
        <thead>
        <th>商品名</th>
        <th>价格</th>
        <th>库存</th>
        </thead>
        <tbody id="tbody">

        </tbody>
    </table>
</div>
<script>

    window.onload = function (){
        $.ajax({
            url:"http://localhost:8080/demo/product/searchProducts",
            dataType:'json',
            type:'POST',
            success:function (data){
                var dataStr = JSON.stringify(data);
                data = $.parseJSON(dataStr);
                writeList(data);
            },
            error:function (arg1){
                altert("数据加载失败");
                console.log(arg1);
            }
        })
    }

    function writeList(data){
        var showProductBody=document.getElementById('tbody');
        var tdStr = '';
        for (var i = 0; i < data.length;i++){
            tdStr += '<tr>';
            tdStr +='<td>'+data[i].name + '</td>';
            tdStr +='<td>'+data[i].price + '</td>';
            tdStr +='<td>'+data[i].stock + '</td>';
            tdStr += '</tr>'
        }
        showProductBody.innerHTML = tdStr;
    }
</script>

<br/>
<h1>添加商品</h1>
<p>
<form id="addFrom" action="add.html">
    <input type="submit" value="添加商品">
</form>
</p>
</body>
</head>
</html>